@import '../../../core/index.less';

.orin-s-banneredit-root {
    padding: 0;
    margin: 0;
    .banner-dialog {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: @dialogZIndex;
        overflow: auto;
        display: flex;
        &.show {
            .fadeIn();
        }
        &.hide {
            .fadeOut();
        }
        .banneredit-wrap {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            background: rgba(0, 0, 0, 0.6);
            .banneredit-box {
                display: flex;
                flex-direction: column;
                background: @white;
                margin: auto;
                width: 550/@remScale;
                .banneredit-title {
                    .dialog-header();
                    position: relative;
                    height: 50/@remScale;
                    p {
                        .dialog-header-p();
                    }

                    span {
                        .dialog-header-span();
                    }
                }
                .banneredit-contain {
                    display: flex;
                    flex-direction: column;
                    flex: 1;
                    //overflow: auto;
                    padding: 20/@remScale;
                    .banner-image {
                        position: relative;
                        display: flex;
                        align-items: center;
                        flex:0 0 250/@remScale;
                        height: 150/@remScale;
                        background-color: @bg-color;
                        border:1/@remScale solid @border-color;
                        .image {
                            height: 100%;
                            width: 100%;
                            object-fit: cover;
                            border-radius: 0;
                            position: absolute;
                        }
                        .change-btn {
                            position: absolute;
                            bottom: 0;
                            width: 100%;
                            height: 38/@remScale;
                            color: @white;
                            font-size: 14/@remScale;
                            background-color: rgba(0, 0, 0, 0.5);
                            text-align: center;
                            cursor: pointer;
                            line-height: 38/@remScale;
                            input {
                                position: absolute;
                                bottom: 0;
                                left: 0;
                                right: 0;
                                height: 40/@remScale;
                                width:100%;
                                opacity: 0;
                                cursor: pointer;
                                z-index: -1;
                            }
                        }
                    }
                    .banner-size{
                        font-size: 14/@remScale;
                        text-align: center;
                        margin-top: 10/@remScale;
                        color:@mainTextColor;
                    }
                    .detail-form {
                        flex:1;
                        padding: 20/@remScale 0;
                        .detail-item-wrapper {
                            display: flex;
                            margin-bottom: 20/@remScale;
                            .label {
                                color: @black-auxiliary;
                                font-size: 14/@remScale;
                                flex: 0 0 80/@remScale;
                                text-align: right;
                                line-height: 40/@remScale;
                            }
                            .name-input {
                                margin-left: 12/@remScale;
                                height: 40/@remScale;
                                flex: 1;
                                margin-bottom: 0;
                                .input {
                                    width: 100%;
                                }
                            }
                            .assign-user-wrapper {
                                height: 40/@rem;
                                width: 100%;
                                margin:0 0 0 10/@remScale;
                                position: relative;
                                .assign-user-input {
                                    width: 100%;
                                    font-size: 14/@rem;
                                    height: 40/@rem;
                                    margin-bottom: 0;
                                    input {
                                        width: 100%;
                                        flex: auto;
                                    }
                                }
                                .search-user-wrapper {
                                    background: @white;
                                    // padding: 10/@remScale 10/@remScale 0;
                                    position: absolute;
                                    width: 100%;
                                    z-index: 2;
                                    .boxShadow();
                                    .search-user-top {
                                        display: flex;
                                        justify-content: space-between;
                                        .search-user-input {
                                            width: 270/@remScale;
                                            height: 40/@remScale;
                                            @media (max-width: @max1) {
                                                width: 60%;
                                            }
                                        }
                                        .search-user-span {
                                            width: 14/@remScale;
                                            height: 14/@remScale;
                                            display: flex;
                                            color: @pinkish-grey;
                                            cursor: pointer;
                                            &:hover {
                                                color: @black-auxiliary-text;
                                                @media (max-width: @max1) {
                                                    color: @pinkish-grey;
                                                }
                                            }
                                        }
                                    }
                                    .search-user-bottom {
                                        text-align: center;
                                        .bottom-ul {
                                            max-height: 172/@remScale;
                                            overflow-y: auto;
                                            &::-webkit-scrollbar {
                                                width: 5/@remScale;
                                            }
                                            &::-webkit-scrollbar-thumb {
                                                background-color: #A6A6A6;
                                                border-left: 2/@remScale solid transparent;
                                            }
                                            &::-webkit-scrollbar-track {
                                                background-color: #E5E5E5;
                                                border-left: 2/@remScale solid transparent;
                                            }
                                            .bottom-li {
                                                padding-left: 10/@remScale;
                                                height: 43/@remScale;
                                                line-height: 43/@remScale;
                                                border-bottom: 1/@remScale solid @cut-line-color;
                                                font-size: 14/@remScale;
                                                color: @black-auxiliary-text;
                                                text-align: left;
                                                display: flex;
                                                cursor: pointer;
                                                .li-name {
                                                    width: 150/@remScale;
                                                    padding-right: 10/@remScale;
                                                    .text-overflow-1();
                                                }
                                                .li-phone {
                                                }
                                                &:hover {
                                                    background: @light-blue-color;
                                                    color: @white;
                                                }
                                            }
                                        }
                                        .has-no-artist {
                                            font-size: 14/@remScale;
                                            line-height: 40/@remScale;
                                            color: @black-three;
                                        }
                                        .add-artist-wrapper {
                                            text-align: left;
                                            cursor: pointer;
                                            color: @black-three;
                                            font-size: 14/@remScale;
                                            line-height: 40/@remScale;
                                            padding-left: 10/@remScale;
                                            border-top: 1/@remScale solid #eeeeee;
                                            .icon {
                                                width: 10/@remScale;
                                                height: 10/@remScale;
                                                margin-right: 5/@remScale;
                                            }
                                            &:hover {
                                                color: @light-blue-color;
                                            }
                                        }
                                    }
                                }
                            }
                            .identity-input {
                                margin-left: 12/@remScale;
                                height: 40/@remScale;
                                flex: 1;
                            }
                            .region-input {
                                flex: 1;
                                width: 100%;
                                margin-left: 12/@remScale;
                                height: 40/@remScale;
                                margin-bottom: 0;
                                .input {
                                    width: 100%;
                                }
                            }
                        }
                    }
                }
                .confirm-footer{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 60/@remScale;
                    line-height: 60/@remScale;
                    border-top: 1/@remScale solid @border-color;
                    .title{
                        width:60/@remScale;
                        height: 30/@remScale;
                        line-height: 30/@remScale;
                        border-radius: 4/@remScale;
                        text-align: center;
                        font-size: 14/@remScale;
                        background-color: @light-blue-color;
                        color: @white;
                        cursor: pointer;
                    }
                }
            }
        }
    }
}